<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="../../assets/js/flex.js"></script>
    <link rel="stylesheet" href="../../assets/mui-master/dist/css/mui.min.css">
    <link rel="stylesheet" href="../main.css">
    <style>
        .language-box > header {
            background: #FAFBFC;
        }

        .language-box .language-save {
            color: #000;
        }

        .language-item {
            padding-top: .9rem;
        }

        .language-box .mui-pull-left {
            color: #000;
        }

        .language-item .mui-icon-checkmarkempty {
            color: #1087CD;
            float: right;
            font-size: .56rem;
            width: .42rem;
            height: .42rem;

        }

        .language-item .mui-table-view-cell:after {
            left: 0;
        }
        .language-item li{
            font-size: .3rem;
            padding: 18px 15px;
        }
    </style>
</head>
<body>
<div class="language-box">
    <header class="mui-bar mui-bar-nav mui-bar-transparent">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">多语言</h1>
        <button class="mui-btn mui-btn-link mui-pull-right language-save">保存</button>
    </header>
    <div class="language-item">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">简体中文<span class="mui-icon mui-icon-checkmarkempty"></span></li>
            <li class="mui-table-view-cell">English<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（香港）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
            <li class="mui-table-view-cell">繁体中文（台湾）<span class="mui-icon"></span></li>
        </ul>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="../../assets/mui-master/dist/js/mui.min.js"></script>
<script>
    $(function () {
        $(".language-item li").click(function () {
            $(this).children("span").addClass("mui-icon-checkmarkempty").parent().siblings().children().removeClass("mui-icon-checkmarkempty")
        })
    })
</script>
</body>
</html>